<template>
	<view class="uni-status-bar">
		<view class="uni-status-bar__content" :style="{ height: statusBarHeight }"></view>
		<view class="uni-status-bar__placeholder">
			<view class="uni-status-bar__placeholder-view" :style="{ height:statusBarHeight}" />
		</view>
		<view class="uni-status-bar__back" @click="onBack" v-if="useBack">
			<image src="@/static/svg/icon-page-back.svg" />
		</view>
	</view>
</template>

<script>
	export default {
		name: 'StatusBar',
		props: {
			useBack: {
				default: false
			}
		},
		data() {
			return {
				statusBarHeight: uni.getSystemInfoSync().statusBarHeight + 'px'
			}
		},
		methods: {
			onBack: function() {
				this.$emit('navbar:backPage', true);
			}
		}
	}
</script>

<style lang="scss">
	.uni-status-bar {
		background-color: #fff;

		.uni-status-bar__content {
			position: fixed;
			top: 0;
			left: 0;
			right: 0;
			z-index: 99;
			background-color: #fff;
		}

		.uni-status-bar__back {
			position: fixed;
			z-index: 99;
			padding: 15rpx;

			image {
				width: 50rpx;
				height: 50rpx;
			}
		}
	}
</style>